<template>
  <keep-alive>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>{{ cardName }}</span>
      </div>
      <div
        class="card-content"
        v-if="cardContentList && cardContentList.length > 0"
      >
        <div
          v-for="(cardContent, index) in cardContentList"
          :key="index"
          class="text item"
          :class="{'activeItem':currentIndex === index}"
        >
          <span
            class="card-button"
            @click.stop="onLoadDictTemplate(index, cardContent)"
          >
            {{ cardContent.dictName }}</span
          >
        </div>
      </div>
    </el-card>
  </keep-alive>
</template>

<script>
export default {
  name: 'MyCard',
  props: {
    //卡片名称
    cardName: {
      type: String,
      default: () => {
        return ''
      }
    },
    cardContentList: {
      type: Array,
      default: () => {
        return []
      }
    },
    isActive: {
      type: Boolean,
      default: false,
    }
  },
  data(){
    return {
      currentIndex:0,// 默认选中第一个，相应的表格数据记得默认渲染第一条数据
    }
  },
  methods: {
    onLoadDictTemplate(index, dictObj) {
      let vm = this
      this.currentIndex = index
      // vm.cardContentList.forEach((s, i) => {
      //   document.querySelector(`.active${i + 1}`).style = null
      // })
      // document.querySelector(`.active${index + 1}`).style.backgroundColor =
      //   'rgba(240, 243, 254, 1)'
      // document.querySelector(`.active${index + 1}`).style.width = '100%'
      dictObj.index = index
      vm.$emit('updateVewList', dictObj)
    }
  }
}
</script>

<style scoped lang="scss">
.box-card {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.text.item {
  width: 100%;
  height: 50px;
  font-size: 15px;
  padding-left: 20px;
}
.card-content {
  margin-top: 20px;
  line-height: 50px;
}
.card-button {
  cursor: pointer;
  display: inline-block;
  width: 100%;
  height: 100%;
}

.item:hover,
isActive {
  background-color: rgba(240, 243, 254, 1);
  width: 100%;
  border: none;
  border-radius: 0px;
}
.activeItem{
  background-color: rgba(240, 243, 254, 1);
  width: 100%;
  border: none;
  border-radius: 0px;
}
.el-button--text {
  color: #222222;
}

::v-deep .el-card__body {
  padding: 0px;
}
</style>
